<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的使用</title>
    <!-- 引入vue, 开发环境 -->
    <script src="./js/vue-2.5.16.js"></script>
    <style>
        #app{
            font-size: 20px;
            color: green;
        }
        .f_r{
            color: red;
        }
        .student span {
            display: inline-block;
            padding: 10px;
            margin: 10px;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
            color: #000;
            border-radius: 10px;
        }
        .input01 input {
            width: 60px;
            height: 30px;
            border: 1px solid #ddd;
            text-align: center;
        }

    </style>
</head>
<body>
    <h1>vue的使用</h1>
    <div id="app">
        <p>[[ message ]] </p>
        <p class="f_r">[[loginMsg ]]</p>
        <p>
            <a :href="baidu_url" target="_blank">百度</a>
            <a :href="tengxun_url" target="_blank">腾讯</a>
        </p>
        <hr>
        <!-- if条件渲染 -->
        <!-- v-if语句 -->
        <p v-if="seen">你能看见我吗？</p>
        <!-- v-if语句 和 v-else -->
        <p v-if="isLogin">个人中心</p>
        <p v-else>登录</p>
        <!-- v-if 、v-else-if、 v-else -->
        <p>
            成绩等级:
            <span v-if="level === 1">A</span>
            <span v-else-if="level === 2">B</span>
            <span v-else-if="level === 3">C</span>
            <span v-else>D</span>
        </p>

        <hr>
        <h2>for列表渲染</h2>
        <div class="student">
            <span v-for="(name, index) in names">
                [[ index + 1 ]] [[ name ]]
             </span>
         </div>
         <ul>
            <li v-for="student in students">
             姓名：[[ student.name ]],
             性别：[[ student.sex ]],
             年龄：[[ student.age ]]
            </li>
        </ul>

        <hr>
        <h2>事件 methods</h2>
        <p>
            <button v-on:click="login">登录</button>
            <button v-on:click="login2('郭鸿宇')">显示姓名登录</button>
            <button v-on:click="add(80, 40)">两个数加法</button>
            <button v-on:click="subtract(80, 40)">两个数减法</button>
            <button v-on:click="multiply(80, 40)">两个数乘法</button>
            <button v-on:click="divide(80, 0)">两个数除法</button>
        </p>

        <hr>
        <h2>model表单输入绑定(双向绑定数据)</h2>
        <div class="input01">
            <input type="number" v-model="num1">
            <select v-model="operator">
                <option value="+"> + </option>
                <option value="-"> - </option>
                <option value="*"> * </option>
                <option value="/"> / </option>
            </select>
            <input type="number" v-model="num2">
            <button @click="num_operator"> = </button>
            [[ result ]]
            <p>[[ num1 ]] [[ operator ]] [[ num2 ]] = [[ result ]]</p>
        </div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app', // 获取页面标记对象 <div id="app"></div>
            delimiters: ['[[',']]'],
            data: {
                message: '欢迎您 Vue!!!',
                loginMsg: '用户名或密码不正确',
                baidu_url: 'https://www.baidu.com',
                tengxun_url: 'https://www.qq.com',
                seen: true,
                isLogin: false,
                level: 2,
                level: 2,
                names: [
                    '曹汉超', '陈丽瑶', '陈若涵', '杜肖杰', '冯旭童', '高梦阳',
                    '高语涵', '葛旭威', '郭鸿宇', '韩宇博', '侯佳敏', '胡向阳',
                    '焦鹏鑫', '李海滨', '李明航', '李强', '李世阳', '栗世博',
                    '刘田诺一', '马智慧', '阮军杰', '申天乐', '万福森', '汪晓佳',
                    '王瑞雪', '王钰', '魏子昊', '武嘉兴', '邢家乐', '徐鎏政',
                    '杨智伟', '袁丞琳', '张宇辉', '赵开心', '赵嫣然', '周浩然'
                 ],
                students: [
                     {
                         'name': '陈丽瑶',
                         'sex': '女',
                         'age': 19,
                     },
                     {
                         'name': '李海滨',
                         'sex': '女',
                         'age': 20,
                     },
                     {
                         'name': '袁丞琳',
                         'sex': '女',
                         'age': 19,
                     },
                     {
                         'name': '赵开心',
                         'sex': '男',
                         'age': 19,
                     }
                 ],
                num1: 0,
                num2: 0,
                result: 0,
                operator: '+'
            },
            // 事件
            methods: {
                login: function() {
                    alert('欢迎您登录！！！');
                },
                login2: function(name) {
                    alert('欢迎您登录！！！' + name);
                },
                add: function(a, b) {
                    result = a + b
                    alert(a + '+' + b + '=' + result);
                },
                // 实现减法
                subtract: function(a, b) {
                    result = a - b
                    alert(a + '-' + b + '=' + result);
                },
                // 实现乘法
                multiply: function(a, b) {
                    result = a * b
                    alert(a + '*' + b + '=' + result);
                },
                // 实现除法
                divide: function(a, b) {
                    if (b === 0) {
                        alert('除数不能为0');
                        return;
                    }
                    result = a / b
                    alert(a + '÷' + b + '=' + result);
                },

                // 实现加减乘除
                num_operator: function() {
                    if (this.operator == '+')
                        this.result = parseInt(this.num1) + parseInt(this.num2);
                    else if(this.operator == '-')
                        this.result = this.num1 - this.num2; 
                    else if(this.operator == '*')
                        this.result = this.num1 * this.num2;
                    else if(this.operator == '/')
                        this.result = this.num1 / this.num2;
                    else
                        this.result = 0
                },
            },
        });
    </script>
</body>
</html>